<template>
	<view v-if="pageState">
		<view class="search">
			<van-search @change="change" :value="query" background="#78cdd1" shape="round" placeholder="搜索" focus style="flex: 1" />
			<van-button color="#7232dd" size="small" :round="true" @click="clickHandle">搜索</van-button>
		</view>
		<scroll-view @scrolltolower="scrolltolower" scroll-y="true" style="height: 1000rpx">
			<view class="goodsList">
				<!-- 控制商品显示 -->
				<view class="listLeft"><goodsItem v-for="(item, index) in data.rows" :key="item._id" v-if="(index + 1) % 2 != 0" :goods="item" class="goodsItem"></goodsItem></view>
				<view class="listRight">
					<goodsItem v-for="(item, index) in data.rows" :key="item._id" v-if="(index + 1) % 2 == 0" :goods="item" class="goodsItem"></goodsItem>
				</view>
			</view>
			<!-- 没商品显示 -->
			<template v-if="data.rows.length == 0">
				<luanqing-empty show="true" text="暂无该商品" textColor="#000"></luanqing-empty>
			</template>
			<!-- 到底显示 -->
			<view class="showInfo" v-if="data.total == data.rows.length && data.total">已经到底了</view>
		</scroll-view>
	</view>
</template>

<script>
import goodsApi from '../../api/goods';
import goodsItem from '../../components/goodsItem/index';
import goodsEmpty from '../../components/luanqing-empty/luanqing-empty';
export default {
	data() {
		return {
			pageState: false,
			query: '',
			data: {
				page: 1,
				limit: 10,
				total: 0,
				maxPage: 0,
				rows: [],
				query: {
					accurate: {
						check: 1,
						status: true
					},
					vague: [
						{
							name: { $regex: '', $options: 'img' }
						},
						{
							desc: { $regex: '', $options: 'img' }
						},
						{
							type: { $regex: '', $options: 'img' }
						}
					]
				}
			}
		};
	},
	components: {
		goodsItem,
		goodsEmpty
	},
	onLoad(options) {
		this.query = options.search;
		this.data.query.vague = this.data.query.vague.map(item => {
			for (let key of Object.keys(item)) {
				item[key].$regex = this.query;
			}
			return item;
		});
		this.getGoods();
	},
	methods: {
		change({ detail }) {
			this.query = detail;
		},
		clickHandle() {
			this.data.query.vague = this.data.query.vague.map(item => {
				for (let key of Object.keys(item)) {
					item[key].$regex = this.query;
				}
				return item;
			});
			this.getGoods();
		},
		getGoods() {
			goodsApi.get({
				page: this.data.page,
				limit: this.data.limit,
				query: this.data.query,
				cb: ({ data }) => {
					console.log(data);
					Object.assign(this.data, data);
					this.pageState = true;
				}
			});
		},
		scrolltolower() {
			if (this.data.total > this.data.rows.length) {
				this.data.page++;
				goodsApi.get({
					page: this.data.page,
					limit: this.data.limit,
					query: this.data.query,
					cb: ({ data }) => {
						this.data.total = data.total;
						this.data.maxPage = data.maxPage;
						this.data.rows.push(...data.rows);
					}
				});
			}
		}
	},
	watch: {}
};
</script>

<style lang="scss" scoped>
.search {
	display: flex;
	align-items: center;
	background-color: #78cdd1;
	padding-right: 4%;
}
.goodsList {
	padding: 4%;
	display: flex;
	justify-content: space-between;
	.listLeft {
		width: 44%;
		display: flex;
		flex-direction: column;
		margin-right: 4%;
	}
	.listRight {
		width: 44%;
		display: flex;
		flex-direction: column;
	}
}
.showInfo {
	padding: 10rpx 0;
	margin: 0 4%;
	border-top: 1px solid #78cdd1;
	text-align: center;
	font-size: 24rpx;
	color: #aaa;
}
</style>
